import React, { useEffect, useState } from 'react';

import Split from '@/components/Split';
import { devicesCount, structureDetail } from '@/services/dataLink';
import Platform from './Platform';
import DevicesAccess from './DevicesAccess';

const VideoCloudPortal = () => {
  const [loading, setLoading] = useState<boolean>(true);
  const [devicesCountData, setDevicesCountData] = useState<any>({});
  const [structureDetailData, setsStructureDetailData] = useState<any>({});

  const query = () => {
    const queryDevicesCount = devicesCount({ query_type: 'access_type' });
    const queryStructureDetail = structureDetail();

    Promise.all([queryDevicesCount, queryStructureDetail])
      .then(res => {
        const [queryDevicesCountRes, queryStructureDetailRes] = res;
        setDevicesCountData(queryDevicesCountRes.data.data);
        setsStructureDetailData(queryStructureDetailRes.data.data);
      })
      .finally(() => {
        setTimeout(() => {
          setLoading(false);
        }, 500);
      });
  };

  useEffect(() => {
    query();
  }, []);
  return (
    <>
      <DevicesAccess loading={loading} data={devicesCountData} />
      <Split />
      <Platform loading={loading} data={structureDetailData} />
    </>
  );
};

export default VideoCloudPortal;
